import { IFormProps, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Table, message } from "antd";
import moment from "moment";
const Styles = require("../../styles/index.less");
import * as api from "../../api/api";
import StoreInfoEdit from "../../components/stores/StoreInfoEdit";
import StoreBalancePushEdit from "../../components/stores/StoreBalancePushEdit";

export interface IStoresInfoPros extends IFormProps {
  store: any;
}
class StoreInfo extends React.PureComponent<IStoresInfoPros, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.getStoreInfo();
  }

  getStoreInfo = (payload?) => {
    payload = Object.assign(
      {},
      this.props.store.storeSearchs,
      this.props.form.getFieldsValue(),
      { ...payload }
    );
    this.props.dispatch({
      type: "store/getStoreByUserId",
      payload
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  edit = (store = {}) => {
    this.props.dispatch({
      type: "store/save",
      payload: { store }
    });
    this.setVisible(true, 0);
  };

  banlance = (store = {}) => {
    this.props.dispatch({
      type: "store/save",
      payload: { store }
    });
    this.setVisible(true, 1);
  };

  setVisible = (visible = false, editType = 0) => {
    this.setState({ visible });
    this.setState({ editType });
  };

  save = form => {
    let { store } = this.props.store;
    form = Object.assign({}, store, form);
    this.props.dispatch({
      type: "store/saveStoreByUser",
      payload: {
        form,
        callback: () => {
          this.setVisible();
        }
      }
    });
  };

  saveBalance = form => {
    this.props.dispatch({
      type: "store/pushBanlanceStore",
      payload: {
        form,
        callback: () => {
          message.info("已经提交结算申请");
          this.setVisible();
        }
      }
    });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const { store } = this.props.store;
    const items = [store];
    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Col span={24}>
            <hr className={Styles.hrBorder} />
            <h3>我的店铺</h3>
          </Col>
          <Col span={24}>
            <Col span={24}>
              <Table
                dataSource={items}
                bordered
                rowKey={(record: api.SingleUserMallStoresVOStoreVO) =>
                  String(record.id)
                }
                loading={loading}
              >
                <Table.Column
                  title="序号"
                  key="no"
                  render={(text, record, index) => {
                    return index + 1;
                  }}
                />
                <Table.Column title="店铺名称" key="name" dataIndex="name" />
                <Table.Column
                  title="经营范围"
                  key="businessScope"
                  dataIndex="businessScope"
                />
                <Table.Column
                  title="总销售额"
                  key="saleAmount"
                  dataIndex="saleAmount"
                />
                <Table.Column
                  title="已结算销售额"
                  key="banlancedSaleAmount"
                  dataIndex="banlancedSaleAmount"
                />
                <Table.Column
                  title="未结算销售额"
                  key="unBanlancedSaleAmount"
                  dataIndex="unBanlancedSaleAmount"
                />
                <Table.Column
                  title="客服电话"
                  key="customerServicePhone"
                  dataIndex="customerServicePhone"
                />
                <Table.Column
                  title="创建时间"
                  key="creationTime"
                  render={(text, record: any, index) => {
                    return (
                      record.creationTime &&
                      moment(record.creationTime).format(dateTimeFormat)
                    );
                  }}
                />
                <Table.Column
                  title="有效截止时间"
                  key="endTime"
                  render={(text, record: any, index) => {
                    return record.endTime == null
                      ? "无"
                      : record.endTime &&
                          moment(record.endTime).format(dateTimeFormat);
                  }}
                />
                <Table.Column
                  title="操作"
                  render={(
                    text,
                    record: api.SingleUserMallStoresVOStoreVO,
                    index
                  ) => {
                    return (
                      <div>
                        <a
                          className={Styles.M_RIGHT}
                          onClick={() => this.edit(record)}
                        >
                          编辑
                        </a>
                        {
                          record && record.unBanlancedSaleAmount || 0 > 0 ? (                        
                          <a
                            className={Styles.M_RIGHT}
                            onClick={() => this.banlance(record)}
                          >
                            结算申请
                          </a>) : ""
                        }

                      </div>
                    );
                  }}
                />
              </Table>
            </Col>
          </Col>
        </Row>
        {this.state.visible && this.state.editType == 0 ? (
          <StoreInfoEdit
            visible={this.state.visible}
            store={store}
            onSave={this.save}
            onCancel={this.setVisible}
          />
        ) : (
          undefined
        )}
        {this.state.visible && this.state.editType == 1 ? (
          <StoreBalancePushEdit
            visible={this.state.visible}
            store={store}
            onSave={this.saveBalance}
            onCancel={this.setVisible}
          />
        ) : (
          undefined
        )}
      </Row>
    );
  }
}

export default connect(
  ({
    store,
    loading: {
      models: { store: loading }
    }
  }) => ({ store, loading })
)(Form.create()(StoreInfo));
